/**
 * Created by xiangjiayu on 2017/7/19. 领证
 */

import React from 'react';
import {Icon,Button,Row,Col,Input,Select,DatePicker,Modal,AutoComplete,Table,Popconfirm} from 'antd';
import CheckBox from '../../../components/common/CheckBox/CheckBox';//自定义 多选框

const { MonthPicker, RangePicker } = DatePicker;//日历
const Option = Select.Option;           //下拉框

import EditableCell from './EditableCell/index';

function onSelect(value) {
}

export default class Licensing extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            //弹窗
            Modal_lz_Add: false,
            Modal_lz_Set: false,
        };
      //可编辑表格；
      this.columns = [{
        title: '证书名称',
        dataIndex: 'name',
        width: '60%',
        render: (text, record, index) => (
          <EditableCell
            value={text}
            onChange={this.onCellChange(index, 'name')}
          />
        ),
      }, {
        title: '操作',
        dataIndex: 'operation',
        render: (text, record, index) => {
          return (
            <div>
              {
                this.state.dataSource.length > 1 ?
                  (
                    <Popconfirm title="确定删除?" onConfirm={() => this.onDelete(index)}>
                      <a href="#">删除</a>
                    </Popconfirm>
                  ) : null
              }
            </div>
          );
        },
      }];
      this.state = {
        //可编辑表格
        dataSource: [{
          key: '0',
          name: '母婴服务'
        }, {
          key: '1',
          name: '母婴服务2'
        }, {
          key: '2',
          name: '母婴服务2'
        }, {
          key: '3',
          name: '母婴服务2'
        }, {
          key: '4',
          name: '母婴服务2'
        }, {
          key: '5',
          name: '母婴服务2'
        }],
        count: 6,
      };
    }
    //弹窗
        //新增
    showModal_lz_Add(Modal_lz_Add) {
        this.setState({ Modal_lz_Add });
    }
        //证书设置
    showModal_lz_Set(Modal_lz_Set) {
      this.setState({ Modal_lz_Set });
    }
    //自动补全
    handleSearch = (value) => {
      this.setState({
          dataSource: !value ? [] : [
            value,
            value + value,
            value + value + value,
          ],
      });
    }
  //可编辑表格
  onCellChange = (index, key) => {
    return (value) => {
      const dataSource = [...this.state.dataSource];
      dataSource[index][key] = value;
      this.setState({ dataSource });
    };
  }
  onDelete = (index) => {
    const dataSource = [...this.state.dataSource];
    dataSource.splice(index, 1);
    this.setState({ dataSource });
  }
  handleAdd = () => {
    const { count, dataSource } = this.state;
    const newData = {
      key: count,
      name:<Input id="xx" placeholder="请输入证书名称"/>,
    };
    this.setState({
      dataSource: [...dataSource, newData],
      count: count + 1,
    });
    setTimeout(
      function(){
        document.getElementById("cert").scrollTop  = document.getElementById("cert").scrollHeight;
      }, 100)

  }
    render(){
      const { dataSource } = this.state;
      const columns = this.columns;
        return(
            <div className="modal-example-cont">
                <Button onClick={() => this.showModal_lz_Add(true)}>新增领证</Button>
                <Modal
                  title="新增领证"
                  wrapClassName="vertical-center-modal"
                  visible={this.state.Modal_lz_Add}
                  onCancel={() => this.showModal_lz_Add(false)}
                >
                    <div className="modal-add-cont">
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label className="ant-form-item-required"><span className="span-left">学员姓名</span></label>
                                </div>
                            </Col>
                            <Col span={10}>
                                <div className="ant-form-item-control has-error">
                                    <AutoComplete
                                      dataSource={dataSource}
                                      onSelect={onSelect}
                                      onSearch={this.handleSearch}
                                      placeholder="请输入学员姓名"
                                    />
                                </div>
                            </Col>
                            <Col span={9}>
                                <div className="error-tip"><Icon type="minus-circle-o" />请输入联系电话</div>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">专业名称</span></label>
                                </div>
                            </Col>
                            <Col span={10}>
                                <div className="ant-form-item-control">
                                  <Select
                                      size="large"
                                      defaultValue="请选择专业名称"
                                  >
                                    <Option value="请选择专业名称">请选择专业名称</Option>
                                    <Option value="高级月嫂专业">高级月嫂专业</Option>
                                  </Select>
                                </div>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                          <Col span={5} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">证书名称</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <div className="ant-form-item-control">
                              <Select
                                size="large"
                                defaultValue="请选择证书名称"
                              >
                                <Option value="请选择证书名称">请选择证书名称</Option>
                                <Option value="初级月嫂结业专业">初级月嫂结业专业</Option>
                                <Option value="中级月嫂结业专业">中级月嫂结业专业</Option>
                                <Option value="高级月嫂结业专业">高级月嫂结业专业</Option>
                              </Select>
                            </div>
                          </Col>
                        </Row>
                        <Row gutter={16}>
                          <Col span={5} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">发证时间</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <div className="ant-form-item-control">
                              <DatePicker size="large" placeholder="请选择发证时间"/>
                            </div>
                          </Col>
                        </Row>
                      <Row gutter={16}>
                        <Col span={5} className="text-r">
                          <div className="ant-form-item-label">
                            <label><span className="span-left">领证时间</span></label>
                          </div>
                        </Col>
                        <Col span={10}>
                          <div className="ant-form-item-control">
                            <DatePicker size="large" placeholder="请选择领证时间"/>
                          </div>
                        </Col>
                      </Row>
                    </div>
                </Modal>
                <Button onClick={() => this.showModal_lz_Set(true)}>证书设置</Button>
                <Modal
                  title="证书设置"
                  wrapClassName="vertical-center-modal"
                  visible={this.state.Modal_lz_Set}
                  onCancel={() => this.showModal_lz_Set(false)}
                >
                  <div>
                    <div id="cert" className="modal-table-mh">
                      <Table bordered dataSource={dataSource} columns={columns} pagination={false}/>
                    </div>
                    <div className="foot-add"><Button onClick={this.handleAdd} type="primary" icon="plus">新增来源</Button></div>
                  </div>
                </Modal>
            </div>

        )
    }
}